<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="../Master/masters.xhtml">
            <ui:define name="content">
                  <script type="text/javascript" src="../Jquery/jquery-1.7.1.min.js"></script>
                <script type="text/javascript" src="../Jquery/jquery-ui-1.8.17.custom.min.js"></script>
                <script type="text/javascript" src="../Jquery/jquery.dataTables.js"></script>
                <script type="text/javascript" src="../Jquery/jquery.easing-1.3.pack.js"></script>
                <script type="text/javascript" src="../Jquery/jquery.mousewheel-3.0.4.pack.js"></script>
                <script type="text/javascript" src="../Jquery/quickpager.jquery.js"></script>

                <script type="text/javascript" src="../Master/resources/scripts/simpla.jquery.configuration.js"></script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#tableJquery').dataTable(
                        { "aoColumnDefs": [
                                { "bSortable": false, "aTargets": [0] },

                                { "asSorting": ["desc", "asc"], "aTargets": [1] }
                            ],
                            "sPaginationType": "full_numbers",
                            "aaSorting": [],
                            "aLengthMenu": [
                                [15, 30, -1],
                                [15,30, "All"]
                            ]
                        }
                    );
                    });
                </script>
                   <div class="templatemo_h_line">
                            </div>
                <h1>#{index.titlePage}</h1>
                <div style="height: 15px;"></div>
                <table class="complaintTable" id="tableJquery">
                    <thead>
                        <tr>
                            <th style="text-align: left">Complaint Title</th>
                            <th>Creator</th>
                            <th>Create Date</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ui:repeat var="complaints" value="#{index.complaint}">
                            <tr>
                                <td class="colTile" style="padding: 0px"><h:commandLink action="#{complaintsDetails.directionComplaints(complaints.complaintID,complaints)}">#{complaints.complaintTitle}</h:commandLink> </td>
                                <td style="text-align: left">#{complaints.membersID.membersName}</td>
                                <td><h:outputText value="#{complaints.complaintCreateDate}" >
                                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                                    </h:outputText></td>
                                <td><h:panelGroup rendered="#{complaints.complaintStatus==0}"><span style="color: red;font-weight: bold">Wait</span></h:panelGroup>
                                    <h:panelGroup rendered="#{complaints.complaintStatus==1}"><span style="color: green;font-weight: bold">Done</span></h:panelGroup></td>
                            </tr>
                        </ui:repeat>
                    </tbody>
                </table>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

